import React, { Component } from 'react';
import * as echarts from 'echarts';
import { CheckCircleTwoTone } from '@ant-design/icons';
class Workbench extends Component {
    componentDidMount() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        var colors = ['#5470C6', '#EE6666'];

        option = {
            color: colors,
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['成交额', '访问量']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '成交额  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: ['2021-03-02', '2021-03-06', '2021-03-10', '2021-03-14', '2021-03-18', '2021-03-22', '2021-03-26', '2021-03-3C']
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '访问量  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '成交额',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '访问量',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                }
            ]
        };
        myChart.setOption(option);
    }
    render() {
        return (
            <div className='workbench'>
                <div className='workbench_one'>
                    <div className='workbench_once'>
                        <h4>经营概况</h4>
                        <ul>
                            <li>实时</li>
                            <li>昨日</li>
                            <li>近7天</li>
                            <li>近30天</li>
                        </ul>
                        <p>更新时间：2021-03-31 19：13：51</p>
                    </div>
                    <div className='workbench_onces'>
                        <ul>
                            <li>
                                <p>今日订单量</p>
                                <b>0</b>
                            </li>
                            <li>
                                <p>今日支付金额</p>
                                <b>￥0</b>
                            </li>
                            <li>
                                <p>今日访客数</p>
                                <b>0</b>
                            </li>
                            <li>
                                <p>今日客单价</p>
                                <b>￥0</b>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className='workbench_two'>
                    <div className='workbench_two_one'>
                        <h4>待处理事项</h4>
                        <div className='workbench_two_once'>
                            <ul>
                                <li>
                                    <p>代发货</p>
                                    <b>1</b>
                                </li>
                                <li>
                                    <p>退款中</p>
                                    <b>0</b>
                                </li>
                                <li>
                                    <p>库存预警</p>
                                    <b>1</b>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className='workbench_two_two'>
                        <h4>常用功能</h4>
                        <div className='workbench_two_once'>
                            <ul>
                                <li>
                                    <p><CheckCircleTwoTone twoToneColor="orange" /></p>
                                    <p>发布商品</p>
                                </li>
                                <li>
                                    <p><CheckCircleTwoTone twoToneColor="orange" /></p>
                                    <p>订单管理</p>
                                </li>
                                <li>
                                    <p><CheckCircleTwoTone twoToneColor="orange" /></p>
                                    <p>打单发货</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='workbench_three'>
                    <div id="main"></div>
                </div>
            </div>
        )
    }
}

export default Workbench;
